<html>
  <head>
    <title>2021 Vis 入门</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/app.css" />
    <script src="./lib/d3.min.js"></script>
    <script src="./js/bars.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <style>
      #content {
        width: 50%;
        max-width: 1000px;
        margin: 0 auto;
      }

      .box {
        width: 100%;
        max-width: 700px;
        margin: 2em 0;
      }

      #logo {
        color: #ebebd3;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: bold;
        margin-left: 25%;
      }

      @media (max-width: 700px) {
        #logo {
          margin-left: 10%;
        }

        #content {
          width: 80%;
        }
      }
    </style>
  </head>
  <body>
    <header class="header">
      <span id="logo">hello visulization</span>
    </header>
    <div id="content">
      <h1>D3 入门 🚀</h1>
      <p>
        D3.js 是一个 JavaScript 库，用于基于数据操作文档。D3 可帮助您使用
        HTML、SVG 和 CSS 使数据栩栩如生。D3 对 Web
        标准的强调为您提供了现代浏览器的全部功能，而无需将自己与专有框架捆绑在一起，将强大的可视化组件和数据驱动的
        DOM 操作方法相结合。
      </p>
      <section>
        <h2>SVG</h2>
        <p>
          SVG，指可缩放矢量图形（Scalable Vector
          Graphics），是用于描述二维矢量图形的一种图形格式。除了 IE8
          之前的版本外，绝大部分浏览器都支持 SVG。
        </p>
        <p>
          接下来我们通过对 2、1、5 的大小进行简单可视化来说明 SVG
          的使用方式。下图中从上到下的每一个长方形依次对应数字
          2、1、5，他们的宽度代表数字的大小。
        </p>
        <p>试一试点击下面的长方形。</p>
        <div class="box">
          <svg id="svg" viewBox="0 0 600 400" style="background: white">
            <g transform="translate(50, 50)">
              <rect width="200" height="80" fill="steelblue" x="0" y="10" />
              <rect width="100" height="80" fill="steelblue" x="0" y="110" />
              <rect width="500" height="80" fill="steelblue" x="0" y="210" />
            </g>
          </svg>
        </div>
      </section>
      <section>
        <h2>nCov 疫情可视化</h2>
        <p>
          下图是截至 2020 年 2 月 20 日 13
          时，全国累计（含港澳台地区，除去湖北省）的确诊断人数进行简单的可视化的结果。
          用 D3 绘制了一个条形图 📊。
        </p>
        <p>试一试鼠标移动到下面的长方形。</p>
        <div class="box">
          <svg id="bar"></svg>
        </div>
      </section>
      <section>
        <h2>Vega</h2>
        <div id="view"></div>
      </section>
    </div>
    <script>
      const rects = document.querySelectorAll("#svg rect");

      rects.forEach((rect) => {
        rect.onclick = toggleColor;
      });

      function toggleColor(event) {
        const element = event.target;
        const fill = element.getAttribute("fill");
        if (fill === "steelblue") {
          element.setAttribute("fill", "orange");
        } else {
          element.setAttribute("fill", "steelblue");
        }
      }
    </script>
    <script>
      d3.csv("./data/data.csv", d3.autoType).then((data) => bars(data));
    </script>
    <div id="view"></div>
    <script>
      vegaEmbed("#view", "./vega/bar.vg.json");
    </script>
  </body>
</html>
